<script setup lang="ts">
const show = ref(false)
const value = ref('')
const checked = ref(false)
const switchValue = ref(false)
const radioValue = ref('1')
const pickerValue = ref('')

const columns = [
  {
    label: '杭州',
    value: 'hangzhou',
  },
  {
    label: '宁波',
    value: 'ningbo',
  },
  {
    label: '温州',
    value: 'wenzhou',
  },
  {
    label: '嘉兴',
    value: 'jiaxing',
  },
  {
    label: '湖州',
    value: 'huzhou',
  },
]

const handleClick = () => {
  show.value = true
}
</script>

<template>
  <view class="container">
    <view class="demo-title">Wot Design Uni 组件展示</view>

    <view class="demo-section">
      <view class="section-title">Button 按钮</view>
      <wd-button>默认按钮</wd-button>
      <wd-button type="primary">主要按钮</wd-button>
      <wd-button type="success">成功按钮</wd-button>
      <wd-button type="warning">警告按钮</wd-button>
      <wd-button type="error">错误按钮</wd-button>
    </view>

    <view class="demo-section">
      <view class="section-title">Input 输入框</view>
      <wd-input v-model="value" placeholder="请输入内容" />
    </view>

    <view class="demo-section">
      <view class="section-title">Checkbox 复选框</view>
      <wd-checkbox v-model="checked">复选框</wd-checkbox>
    </view>

    <view class="demo-section">
      <view class="section-title">Switch 开关</view>
      <wd-switch v-model="switchValue" />
    </view>

    <view class="demo-section">
      <view class="section-title">Radio 单选框</view>
      <wd-radio-group v-model="radioValue">
        <wd-radio value="1">选项1</wd-radio>
        <wd-radio value="2">选项2</wd-radio>
      </wd-radio-group>
    </view>

    <view class="demo-section">
      <view class="section-title">Popup 弹出层</view>
      <wd-button @click="handleClick">点击弹出</wd-button>
      <wd-popup v-model="show">
        <view class="popup-content">这是弹出层内容</view>
      </wd-popup>
    </view>

    <view class="demo-section">
      <view class="section-title">Picker 选择器</view>
      <wd-picker
        v-model="pickerValue"
        :columns="columns"
        title="选择城市"
        label-key="label"
        value-key="value"
      />
    </view>
  </view>
</template>

<style lang="scss">
.container {
  padding: 20px;
}

.demo-title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.demo-section {
  margin-bottom: 30px;

  .section-title {
    margin-bottom: 10px;
    font-size: 16px;
    color: #666;
  }

  .wd-button {
    margin: 0 10px 10px 0;
  }
}

.popup-content {
  padding: 30px;
  text-align: center;
}
</style>
